<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui-v2.5.7/layui-v2.5.7/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<form class="layui-form" id="myform" lay-filter="myform" style="margin-top: 10px;" >
  <div class="layui-form-item" style="display: flex;align-items: center;width: 300px">
    <div class="layui-input-block" style="margin-left: 10px;flex: 2;">
      <input type="text" name="name" id="search" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
    </div>
    <button class="layui-btn layui-btn-normal" type="button" style="flex: 1;" id="searchBtn">查询</button>
  </div>
</form>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo" lay-filter="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="../js/jquery.min.js"></script>
<script src="../layui-v2.5.7/layui-v2.5.7/layui/layui.all.js" charset="utf-8"></script>
<script>
  layui.use('table', function(){
    var table = layui.table;

    var tableIns = table.render({
      elem: '#test'
      ,url:'https://www.iloveyxr.top:8081/comment/all'
      ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      ,toolbar: "#toolbarDemo"
      ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
        title: '提示'
        ,layEvent: 'LAYTABLE_TIPS'
        ,icon: 'layui-icon-tips'
      }]
      ,parseData: function (res){
        var result;
        if (this.page.curr) {
          result = res.comments.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
        }
        else {
          result = res.comments.slice(0, this.limit);
        }
        return{
          "code": 0,
          "msg": res.message,
          "count": res.l,
          "data": result,
        }
      }
      ,cols: [[
        {type:"checkbox"}
        ,{field:'id', width:80, title: 'ID', sort: true}
        ,{field:'username', width:100, title: '用户名'}
        ,{field:'number', width:150, title: '学号', sort: true}
        ,{field:'content', width:200, title: '内容'}
        ,{field:'time', title: '时间', width: 180,} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
      ]]
      ,loading: true
      ,page: true
      ,limits: [10,15,20,120]
      ,limit: 10
      ,id: "testReload"
    });
    table.on('toolbar(test)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case 'getCheckData':
          var data = checkStatus.data;
          console.log(data);
          layer.alert(JSON.stringify(data));
          break;
        case 'getCheckLength':
          var data = checkStatus.data;
          layer.msg('选中了：'+ data.length + ' 个');
          break;
        case 'isAll':
          layer.msg(checkStatus.isAll ? '全选': '未全选');
          break;

              //自定义头工具栏右侧图标 - 提示
        case 'LAYTABLE_TIPS':
          layer.alert('这是工具栏右侧自定义的一个图标按钮');
          break;
      };
    });
    document.getElementById("searchBtn").onclick = function(){
      var val = $("#search").val();
      console.log(val);
      tableIns.reload({
        url:"https://www.iloveyxr.top:8081/comment/name",
        page:{
          curr: 1
        },
        where:{
          name: val,
        }
      })
    }
  });
</script>

</body>
</html>